<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="个人作品集网站 - 展示我的项目和技能">
    <title>我的作品集</title>
    <link rel="stylesheet" href="styles.css">
    <script src="languages.js"></script>
</head>
<body>
    <header>
        <nav class="navbar">
            <div class="nav-container">
                <div class="nav-logo">
                    <h1>我的作品集</h1>
                </div>
                <ul class="nav-menu">
                    <li class="nav-item">
                        <a href="#home" class="nav-link">首页</a>
                    </li>
                    <li class="nav-item">
                        <a href="#about" class="nav-link">关于我</a>
                    </li>
                    <li class="nav-item">
                        <a href="#projects" class="nav-link">项目</a>
                    </li>
                    <li class="nav-item">
                        <a href="#contact" class="nav-link">联系</a>
                    </li>
                    <li class="nav-item language-selector-item">
                        <label class="language-label">语言：</label>
                        <select id="language-selector" class="language-selector">
                            <option value="zh-CN">中文</option>
                            <option value="en">English</option>
                        </select>
                    </li>
                    <li class="nav-item">
                        <button id="theme-toggle" class="theme-toggle" aria-label="切换主题">
                            <span class="theme-icon">🌙</span>
                            <span class="theme-text">深色模式</span>
                        </button>
                    </li>
                </ul>
                <div class="hamburger">
                    <span class="bar"></span>
                    <span class="bar"></span>
                    <span class="bar"></span>
                </div>
            </div>
        </nav>
    </header>

    <main>
        <section id="home" class="hero">
        <div class="hero-background">
            <div class="hero-gradient"></div>
            <div class="hero-particles"></div>
        </div>
            <div class="hero-content">
                <h1 class="hero-title" data-i18n="hero.title">欢迎来到我的作品集</h1>
                <p class="hero-subtitle" data-i18n="hero.subtitle">我是一名充满激情的开发者</p>
                <button class="cta-button" id="view-projects" data-i18n="hero.cta">查看项目</button>
            </div>
        </section>
        </div>

        <section id="about" class="about">
            <div class="container">
                <h2 class="section-title" data-i18n="about.title">关于我</h2>
                <div class="about-content">
                    <div class="about-text">
                        <p data-i18n="about.description1">我是一名充满激情的全栈开发工程师，拥有5年的开发经验。我热爱技术，喜欢探索新的技术栈和解决方案。</p>
                        <p data-i18n="about.description2">我的目标是通过技术创造价值，为用户提供优秀的产品体验。我相信好的代码不仅要功能完善，还要易于维护和扩展。</p>
                        <div class="skills">
                            <h3 data-i18n="about.skills">技能专长</h3>
                        <ul class="skills-list">
                            <li class="skill-item">
                                <div class="skill-header">
                                    <span data-i18n="skills.frontend_dev">前端开发</span>
                                    <span class="skill-percentage">95%</span>
                                </div>
                                <div class="progress-bar">
                                    <div class="progress-fill" data-progress="95"></div>
                                </div>
                            </li>
                            <li class="skill-item">
                                <div class="skill-header">
                                    <span data-i18n="skills.backend_dev">后端开发</span>
                                    <span class="skill-percentage">85%</span>
                                </div>
                                <div class="progress-bar">
                                    <div class="progress-fill" data-progress="85"></div>
                                </div>
                            </li>
                            <li class="skill-item">
                                <div class="skill-header">
                                    <span data-i18n="skills.database_design">数据库设计</span>
                                    <span class="skill-percentage">80%</span>
                                </div>
                                <div class="progress-bar">
                                    <div class="progress-fill" data-progress="80"></div>
                                </div>
                            </li>
                            <li class="skill-item">
                                <div class="skill-header">
                                    <span data-i18n="skills.ui_ux_design">UI/UX设计</span>
                                    <span class="skill-percentage">75%</span>
                                </div>
                                <div class="progress-bar">
                                    <div class="progress-fill" data-progress="75"></div>
                                </div>
                            </li>
                            <li class="skill-item">
                                <div class="skill-header">
                                    <span data-i18n="skills.project_management">项目管理</span>
                                    <span class="skill-percentage">70%</span>
                                </div>
                                <div class="progress-bar">
                                    <div class="progress-fill" data-progress="70"></div>
                                </div>
                            </li>
                        </ul>
                        </div>
                    </div>
                    <div class="about-stats">
                        <div class="stat-item">
                            <h3 data-i18n="about.experience">专业经历</h3>
                            <p data-i18n="about.experience_years">5年+ 开发经验</p>
                        </div>
                        <div class="stat-item">
                            <h3 data-i18n="about.projects">完成项目</h3>
                            <p data-i18n="about.projects_count">50+ 项目</p>
                        </div>
                        <div class="stat-item">
                            <h3 data-i18n="about.satisfaction">客户满意度</h3>
                            <p data-i18n="about.satisfaction_rate">98% 好评</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="projects" class="projects">
            <div class="container">
                <h2 class="section-title" data-i18n="projects.title">我的项目</h2>
                <div class="projects-grid">
                    <div class="project-card" data-project="project1">
                        <div class="project-image">
                            <div style="width: 100%; height: 250px; background: linear-gradient(135deg, #4A90E2, #357ABD); display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; font-weight: bold;">项目一</div>
                        </div>
                        <div class="project-content">
                            <h3 data-i18n="projects.project1.title">电商平台</h3>
                            <p data-i18n="projects.project1.description">一个功能完整的电商平台，包含用户管理、商品展示、购物车、支付等功能。</p>
                            <div class="project-tech">
                                <span class="tech-tag" data-i18n="tech.react">React</span>
                                <span class="tech-tag" data-i18n="tech.nodejs">Node.js</span>
                                <span class="tech-tag" data-i18n="tech.mongodb">MongoDB</span>
                            </div>
                            <div class="project-links">
                                <a href="#" class="project-link demo-link" data-i18n="projects.demo">在线演示</a>
                                <a href="#" class="project-link code-link" data-i18n="projects.code">源代码</a>
                            </div>
                        </div>
                    </div>
                    <div class="project-card" data-project="project2">
                        <div class="project-image">
                            <div style="width: 100%; height: 250px; background: linear-gradient(135deg, #E74C3C, #C0392B); display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; font-weight: bold;">项目二</div>
                        </div>
                        <div class="project-content">
                            <h3 data-i18n="projects.project2.title">任务管理系统</h3>
                            <p data-i18n="projects.project2.description">一个现代化的任务管理应用，支持团队协作、进度跟踪、文件共享等功能。</p>
                            <div class="project-tech">
                                <span class="tech-tag" data-i18n="tech.vuejs">Vue.js</span>
                                <span class="tech-tag" data-i18n="tech.express">Express</span>
                                <span class="tech-tag" data-i18n="tech.mysql">MySQL</span>
                            </div>
                            <div class="project-links">
                                <a href="#" class="project-link demo-link" data-i18n="projects.demo">在线演示</a>
                                <a href="#" class="project-link code-link" data-i18n="projects.code">源代码</a>
                            </div>
                        </div>
                    </div>
                    <div class="project-card" data-project="project3">
                        <div class="project-image">
                            <div style="width: 100%; height: 250px; background: linear-gradient(135deg, #27AE60, #219653); display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; font-weight: bold;">项目三</div>
                        </div>
                        <div class="project-content">
                            <h3 data-i18n="projects.project3.title">数据可视化平台</h3>
                            <p data-i18n="projects.project3.description">一个强大的数据可视化平台，支持多种图表类型，实时数据更新。</p>
                            <div class="project-tech">
                                <span class="tech-tag" data-i18n="tech.d3js">D3.js</span>
                                <span class="tech-tag" data-i18n="tech.python">Python</span>
                                <span class="tech-tag" data-i18n="tech.postgresql">PostgreSQL</span>
                            </div>
                            <div class="project-links">
                                <a href="#" class="project-link demo-link" data-i18n="projects.demo">在线演示</a>
                                <a href="#" class="project-link code-link" data-i18n="projects.code">源代码</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="contact" class="contact">
            <div class="container">
                <h2 class="section-title" data-i18n="contact.title">联系我</h2>
                <div class="contact-content">
                    <div class="contact-info">
                        <h3 data-i18n="contact.info">联系方式</h3>
                        <div class="contact-item">
                            <span class="contact-icon">📧</span>
                            <span data-i18n="contact.email" id="email">2763382198@qq.com</span>
                        </div>
                        <div class="contact-item">
                            <span class="contact-icon">📱</span>
                            <span data-i18n="contact.phone">+86 123 4567 8900</span>
                        </div>
                        <div class="contact-item">
                            <span class="contact-icon">📍</span>
                            <span data-i18n="contact.location">中国 北京</span>
                        </div>
                        <div class="social-media">
                            <h4 data-i18n="contact.social">社交媒体</h4>
                            <div class="social-links-vertical">
                                <a href="https://gitee.com/xin-0717" class="social-link-vertical" target="_blank">
                                    <span class="social-icon">🌐</span>
                                    <span data-i18n="contact.website">个人网页</span>
                                </a>
                                <a href="mailto:2763382198@qq.com" class="social-link-vertical">
                                    <span class="social-icon">📧</span>
                                    <span data-i18n="contact.email_link">邮箱联系</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="contact-form-container">
                        <form id="contact-form">
                            <div class="form-group">
                                <label for="name" data-i18n="contact.name">姓名</label>
                                <input type="text" id="name" name="name" required>
                                <span class="error-message" id="name-error"></span>
                            </div>
                            <div class="form-group">
                                <label for="email-input" data-i18n="contact.email_label">邮箱</label>
                                <input type="email" id="email-input" name="email" required>
                                <span class="error-message" id="email-error"></span>
                            </div>
                            <div class="form-group">
                                <label for="message" data-i18n="contact.message">留言</label>
                                <textarea id="message" name="message" rows="5" required placeholder="请输入您的留言内容..."></textarea>
                                <span class="error-message" id="message-error"></span>
                            </div>
                            <button type="submit" class="submit-button" data-i18n="contact.submit">发送消息</button>
                            <div class="success-message" id="form-success">
                                <strong>成功！</strong> 您的消息已成功发送，我会尽快回复您。
                            </div>
                            <div class="error-message" id="form-error">
                                <strong>错误！</strong> 请检查表单内容并重新提交。
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <div class="container">
            <p data-i18n="footer.copyright">&copy; 2024 我的作品集. 保留所有权利.</p>
            <div class="social-links">
                <a href="https://gitee.com/xin-0717" class="social-link" target="_blank">Gitee</a>
                <a href="mailto:2763382198@qq.com" class="social-link" data-i18n="footer.email">邮箱</a>
                <a href="#" class="social-link" data-i18n="footer.wechat">微信</a>
            </div>
        </div>
    </footer>

    <script src="main.js?v=20241226"></script>
</body>
</html>